<!DOCTYPE html>
<html>
<head>
    <title>❤️ 给你的表白 ❤️</title>
    <style>
        body {
            background: #ffebee;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #heart {
            width: 100px;
            height: 100px;
            background: red;
            transform: rotate(45deg);
            position: relative;
            cursor: pointer;
            animation: pulse 1.5s infinite;
        }
        #heart:before, #heart:after {
            content: "";
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position: absolute;
        }
        #heart:before {
            top: -50px;
            left: 0;
        }
        #heart:after {
            top: 0;
            left: -50px;
        }
        @keyframes pulse {
            0% { transform: rotate(45deg) scale(1); }
            50% { transform: rotate(45deg) scale(1.3); }
            100% { transform: rotate(45deg) scale(1); }
        }
        #message {
            display: none;
            position: absolute;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="heart" onclick="showMessage()"></div>
    <div id="message">
        <h1>我喜欢你！❤️</h1>
        <p>愿意和我在一起吗？</p>
        <button onclick="alert('❤️ 我也喜欢你！ ❤️')">愿意</button>
        <button onclick="moveButton()">不愿意</button>
    </div>

    <script>
        function showMessage() {
            document.getElementById("message").style.display = "block";
        }
        function moveButton() {
            const btn = document.querySelector("#message button:last-child");
            btn.style.position = "absolute";
            btn.style.left = Math.random() * 200 + "px";
            btn.style.top = Math.random() * 200 + "px";
        }
    </script>
</body>
</html>